import React from 'react'
import Appson from './appson'
import Fun from './fun'
import axios from 'axios'
import Style from "../style/index.module.css"
import {useRef,useEffect,useState} from "react" // USEREF就是用来获取dom得一个hooks
const style = {
    background:"red"
}
function App() {
      let [arr,setArr] = useState([])
      useEffect(()=>{
        axios.get("/list").then(res=>{
            console.log(res.data);
            setArr(res.data)
        })
      },[])
//    let [flag,setFlag] = useState(true)
   let right = useRef(null)
//   useEffect(()=>{
//     console.log(myspan.current);
//     console.log(document.getElementById("spans"))
//   },[]) // 当useEffeact得第二个参数为一个空数组得时候，就可以模拟出compoentDidmountd这个生命周期
 
//   return (
//     <div>
//         <span ref={myspan} id="spans">我是要被获取的dom</span>
//         <Appson></Appson>
//         {
//             flag ?  <Fun send={"aaa"}></Fun> : null
//         }
        
//         <button onClick={()=>{setFlag(!flag)}}>点我我卸载或者创建子组件</button>
//     </div>
const fn =(index)=>{
    console.log(right);
     right.current.children[index].scrollIntoView({behavior:"smooth"})
}
      return (
          
           <div className='bao' >
               <h1 className={Style.home1}>acsaxasx</h1>
               <div className='left'>
                   {
                       arr && arr.length ? arr.map((item,index)=>{
                           return <h4 key={index} onClick={()=>{fn(index)}}>{item.title}</h4>
                       }):""
                   }
               </div>
               <div className='right' ref={right}>
                   {
                         arr && arr.length ? arr.map((item,index)=>{
                            return (
                                <div key={index} className="rightbao">
                                    <h4>{item.title}</h4>
                                    <div style={{height:"200px"}}></div>
                                </div>
                            )
                        }):""
                   }
             
               </div>
           </div>
      )
  
}

export default App